<template>
  <div>
    <a-card class="cardBox appEffect">
      <div class="tit" slot="title">应用成效</div>
      <div class="content">
        <a-tabs default-active-key="5" size="large" @change="callback">
          <a-tab-pane key="5" tab="改革成效">
            <hyt-reform></hyt-reform>
          </a-tab-pane>
          <!--<a-tab-pane key="6" tab="系统介绍">
            <hyt-videob></hyt-videob>
          </a-tab-pane>-->
          <a-tab-pane key="1" tab="产业经济">
            <div class="itemBox">
              <div class="items" v-for="(item, i) in industrialData" :key="i">
                <div class="item" style="position: relative">
                  <div :class="`ico ico${i}`">
                    <i class="iconfont icon-24gl-city3" v-if="i==0"></i>
                    <i class="iconfont icon-24gl-city4" v-if="i==1"></i>
                    <i class="iconfont icon-24gl-city" v-if="i==2"></i>
                    <i class="iconfont icon-zongyingshou" v-if="i==3"></i>
                    <i class="iconfont icon-icon-shuishou" v-if="i==4"></i>
                  </div>
                  <p class="name">{{ item.name }}</p>
                  <p class="val">{{ item.num }}<small>{{ item.unit }}</small></p>
                </div>
              </div>
            </div>
            <a-row :gutter="16" style="margin-top: 20px;">
              <a-col :span="12">
                <dv-charts :option="revenueOption" style="width: 100%; height: 300px" />
              </a-col>
              <a-col :span="12">
                <dv-charts :option="taxRevenueOption" style="width: 100%; height: 300px" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="横店出品">
            <a-row :gutter="16" style="margin-top: 20px;">
              <a-col :span="9">
                <div style="display: flex">
                  <div style="width: 260px; height: 260px;">
                    <dv-active-ring-chart :config="ringChartHdcp" style="width:100%;height:100%" />
                  </div>
                  <div class="label-tag">
                    <div class="label-item" v-for="(label, i) in ringChartHdcp.data" :key="i">
                      <div :style="`background-color: ${ringChartHdcp.color[i % ringChartHdcp.color.length]};`" />{{ label.name }}<span>{{ label.value }}</span>{{ label.unit }}
                    </div>
                  </div>
                </div>
              </a-col>
              <a-col :span="15">
                <dv-charts :option="spslOption" style="width: 100%; height: 260px" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="3" tab="影视拍摄">
            <div class="itemBox">
              <div class="items" v-for="(item, i) in movieData" :key="i">
                <div class="item">
                  <div :class="`ico ico${i}`">
                    <i class="iconfont icon-yingshi" v-if="i==0"></i>
                    <i class="iconfont icon-paishe" v-if="i==1"></i>
                    <i class="iconfont icon-paishe-" v-if="i==2"></i>
                    <i class="iconfont icon-zongyingshou" v-if="i==3"></i>
                    <i class="iconfont icon-renshu" v-if="i==4"></i>
                  </div>
                  <p class="name">{{ item.name }}</p>
                  <p class="val">{{ item.num }}<small>{{ item.unit }}</small></p>
                </div>
              </div>
            </div>
            <a-row :gutter="16" style="margin-top: 20px;">
              <a-col :span="10">
                <dv-charts :option="liveActionOption" style="width: 100%; height: 300px" />
              </a-col>
              <a-col :span="14">
                <dv-charts :option="crewNumOption" style="width: 100%; height: 270px" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="4" tab="影视人才">
            <a-row :gutter="16">
              <a-col :span="24">
                <ul class="personnel">
                  <li v-for="(item, i) in personnelData" :key="i">
                    <div class="item">
                      <div :class="`ico ico${i}`">
                        <i class="iconfont icon-yingshi" v-if="i==0"></i>
                        <i class="iconfont icon-renshu" v-if="i==1"></i>
                        <i class="iconfont icon-huoyuerenshu" v-if="i==2"></i>
                        <i class="iconfont icon-fenbu" v-if="i==3"></i>
                      </div>
                      <p class="val">{{ item.num }}<span>{{ item.unit }}</span></p>
                      <p class="name">{{ item.name }}</p>
                    </div>
                  </li>
                </ul>
              </a-col>
              <a-col :span="24">
                <a-row>
                  <a-col :span="8">
                    <div class="person">
                      <div style="width: 260px; height: 260px; margin: auto">
                        <dv-active-ring-chart :config="ringChartGzfx" style="width:100%;height:100%" />
                      </div>
                      <div class="labelTag">
                        <div class="labelItem" v-for="(label, i) in ringChartGzfx.data" :key="i">
                          <div :style="`background-color: ${ringChartGzfx.color[i % ringChartGzfx.color.length]};`" />{{ label.name }}
                        </div>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div class="person">
                      <div style="width: 260px; height: 260px; margin: auto">
                        <dv-active-ring-chart :config="ringChartXlfx" style="width:100%;height:100%" />
                      </div>
                      <div class="labelTag">
                        <div class="labelItem" v-for="(label, i) in ringChartXlfx.data" :key="i">
                          <div :style="`background-color: ${ringChartXlfx.color[i % ringChartXlfx.color.length]};`" />{{ label.name }}
                        </div>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div class="person">
                      <div style="width: 260px; height: 260px; margin: auto">
                        <dv-active-ring-chart :config="ringChartNlfx" style="width:100%;height:100%" />
                      </div>
                      <div class="labelTag">
                        <div class="labelItem" v-for="(label, i) in ringChartNlfx.data" :key="i">
                          <div :style="`background-color: ${ringChartNlfx.color[i % ringChartNlfx.color.length]};`" />{{ label.name }}
                        </div>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>

    </a-card>
  </div>
</template>

<script>
  // import hytVideob from './hytVideob'
  import hytReform from './hytReform'
  export default {
    name: 'HytBoard5',
    components: {
      // hytVideob,
      hytReform
    },
    data () {
      return {
        industrialData: [
          { num: 6361, unit: '家', name: '东阳' },
          { num: 2560, unit: '家', name: '横店' },
          { num: 1559, unit: '家', name: '集聚区' },
          { num: 1848.24, unit: '亿元', name: '累计营收' },
          { num: 172.15, unit: '亿元', name: '累计税收' }
        ],
        revenueOption: {
          title: {
            text: '近三年营收'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2020', '2021', '2022']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            // #d4d4d4
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            // name: '销售额',
            data: 'value',
            min: 0,
            max: 230,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          series: [
            {
              name: '2020',
              data: [18.84, 26.80, 36.74, 49.42, 56.10, 69.88, 74.38, 104.57, 117.72, 134.16, 142.84, 157.03],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2021',
              data: [31.01, 45.19, 54.18, 74.04, 89.70, 103.77, 120.67, 135.11, 152.86, 165.76, 182.83, 211.24],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2022',
              data: [38.09, 52.76, 68.96, 103.39],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        }, // 营收
        taxRevenueOption: {
          title: {
            text: '近三年税收'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2020', '2021', '2022']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            // name: '销售额',
            data: 'value',
            min: 0,
            max: 10,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          series: [
            {
              name: '2020',
              data: [2.57, 3.07, 3.44, 3.83, 4.77, 6.29, 6.53, 6.83, 6.93, 7.00, 7.05, 7.28],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2021',
              data: [2.43, 2.72, 2.93, 3.98, 4.17, 5.73, 6.00, 6.53, 7.19, 7.68, 7.99, 8.86],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2022',
              data: [3.08, 4.77, 5.86, 6.6],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        }, // 税收
        ringChartHdcp: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            {
              name: '电影',
              value: 1043,
              unit: '部'
            },
            {
              name: '网剧',
              value: 13450,
              unit: '部'
            },
            {
              name: '电视剧',
              value: 89413,
              unit: '集'
            }
          ],
          // #E85894 #a970e1 #6a92ed #ed9720 #61c1f8
          color: ['#E85894', '#a970e1', '#ed9720', '#6a92ed', '#61c1f8', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        }, // 横店出品
        spslOption: {
          title: {
            text: '影视聚集审批数量'
          },
          xAxis: {
            data: [
              '2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06',
              '2022-08', '2022-07', '2022-09', '2022-10', '2022-11', '2022-12'
            ],
            axisLabel: {
              style: {
                rotate: 20,
                textAlign: 'left',
                textBaseline: 'top',
                fill: '#b7b6b6'
              }
            },
            axisTick: {
              show: false,
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            }
          },
          yAxis: [
            {
              data: 'value',
              min: 0,
              max: 20,
              interval: 5,
              splitLine: {
                style: {
                  lineDash: [3, 3]
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                style: {
                  fill: '#b7b6b6'
                }
              }
            }
          ],
          series: [
            {
              // 13, 8, 11, 12, 7, 10, 9, 14, 8
              data: [
                13, 8, 11, 12, 7
              ],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 14
                }
              },
              type: 'bar',
              gradient: {
                color: ['#37a2da', '#67e0e3']
              },
              animationCurve: 'easeOutBounce'
            }
          ]
        }, // 审批数量
        movieData: [
          { num: 57, unit: '部', name: '已杀青' },
          { num: 40, unit: '部', name: '在拍' },
          { num: 13, unit: '部', name: '筹拍' },
          { num: 108.5, unit: '亿', name: '游客营收' },
          { num: 747.9, unit: '万人次', name: '游客数' }
        ], // 影视拍摄
        liveActionOption: {
          title: {
            text: '实景基地'
          },
          grid: {
            left: '23%',
            right: 0
          },
          xAxis: {
            min: 0,
            max: 100,
            data: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              // show: false
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            data: ['广州街香港街', '明清宫苑', '秦王宫'],
            axisLabel: {
              style: {
                fill: '#b7b6b6',
                fontSize: 14
              }
            },
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            }
          },
          series: [
            {
              data: [69, 83, 51],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 16
                }
              },
              gradient: {
                color: ['#67e0e3', '#37a2da']
              },
              type: 'bar',
              animationCurve: 'easeOutBack'
            }
          ]
        },
        crewNumOption: {
          title: {
            text: '近三年剧组数'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2020', '2020', '2022']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            data: 'value',
            min: 0,
            // max: 30,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          series: [
            {
              name: '2020',
              // data: [3, 4, 5, 7, 8, 10, 10, 11, 11, 11, 11, 11],
              data: [13, 34, 51, 68, 87, 108, 165, 170, 223, 241, 267, 283],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2021',
              data: [45, 60, 91, 136, 171, 222, 252, 279, 325, 351, 371, 387],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2022',
              data: [14, 31, 55, 76, 114],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        },
        personnelData: [
          { name: '影视工匠总人数', num: '117341', unit: '人' },
          // { name: '当前在组人数', num: '5910', unit: '人' },
          { name: '日均活跃人数', num: '3440', unit: '人' },
          { name: '月人均参演数', num: '11', unit: '次' }
        ],
        ringChartGzfx: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            {
              name: '摄像',
              value: 1043
            },
            {
              name: '演员',
              value: 53578
            },
            {
              name: '其他',
              value: 13450
            }
          ],
          // #E85894 #a970e1 #6a92ed #ed9720 #61c1f8
          color: ['#E85894', '#a970e1', '#ed9720', '#6a92ed', '#61c1f8', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        }, // 工种分析
        ringChartXlfx: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            { name: '博士', value: 589 },
            { name: '本科', value: 1898 },
            { name: '专科及以下', value: 8659 }
          ],
          color: ['#E85894', '#a970e1', '#ed9720', '#6a92ed', '#61c1f8', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        }, // 学历分析
        ringChartNlfx: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            { name: '60及以上', value: 889 },
            { name: '18-29', value: 5898 },
            { name: '30-45', value: 3659 }
          ],
          color: ['#E85894', '#a970e1', '#ed9720', '#6a92ed', '#61c1f8', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        } // 年龄分析
      }
    },
    mounted () {

    },
    watch: {
    },
    methods: {
      callback (key) {
        console.log(key)
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);

    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .appEffect {
    .itemBox{ display: flex; padding-top: 15px;
      .items { width: 25%; padding: 0 15px;
        .item{ height: 58px;
          /*background-image: url("~@/assets/img/icon.png");*/
          background-repeat: no-repeat;
          background-position: left center;
          background-size: contain;
          display: flex;
          flex-flow: column;
          align-items: flex-start;
          justify-content: space-evenly; position: relative;
          .ico {
            position: absolute;
            left: 0;
            text-align: center;
            top: 4px;
            width: 50px;
            line-height: 50px;
            height: 50px;
            background: #4194fb;
            border-radius: 50%;
          }
          .ico0 { background: #E85894 }
          .ico1 { background: #a970e1 }
          .ico2 { background: #6a92ed }
          .ico3 { background: #ed9720 }
          .ico4 { background: #61c1f8 }
          .iconfont {  font-size: 30px; color: #fff;}
          p{margin-left: 65px; margin-bottom: 0; color: #666}
          p.val {font-size: 28px; line-height: 30px; color: #2e7cf9} // #d66f05
          small {font-size: 15px; margin-left: 5px; color: #777}
        }
      }
    }
    .label-tag {
      width: calc( 100% - 260px);
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      .label-item {
        margin: 5px;
        font-size: 16px;
        display: flex;
        align-items: center; color: #666;
        span{ font-weight: bold; margin-left: 10px;}
        div {
          width: 12px;
          height: 12px;
          margin-right: 5px;
        }
      }
    }
    .person {}
    .labelTag { text-align: center; display: block}
    .labelItem {margin: 0 5px;font-size: 16px;display: inline-block;
      align-items: center; color: #666;
      div {
        width: 12px;
        height: 12px; display: inline-block;
        margin-right: 5px;
      }
    }
  }
  .personnel {
    display: flex;
    li { width: 33.3%; padding-bottom: 10px; padding-top: 10px; text-align: center }
    div {display: inline-block;position: relative; text-align: left}
    .ico {
      position: absolute;
      left: 0;
      text-align: center;
      top: 0;
      width: 50px;
      line-height: 50px;
      height: 50px;
      background: #4194fb;
      border-radius: 50%;
    }
    .ico0 { background: #E85894 }
    .ico1 { background: #a970e1 }
    .ico2 { background: #6a92ed }
    .ico3 { background: #ed9720 }
    .ico4 { background: #61c1f8 }
    .iconfont {  font-size: 30px; color: #fff;}
    p { margin-bottom: 0; padding-left: 60px;}
    .val { font-size: 25px; height: 28px; line-height: 28px; color: #2e7cf9}
    span {font-size: 14px; color: #777; margin-left: 5px;}
  }
</style>
